<template>
<el-dialog title="请选择文件" :visible.sync="show" @open="open" :close-on-click-modal="false" :height="400">
  <el-container>
    <el-header style="height:auto">
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item label="关键字">
          <el-input v-model="keyword" placeholder="请填写关键字" clearable @clear="clearConditions"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%;" highlight-current-row @row-click="rowClick" @row-dblclick="rowDbClick">
        <el-table-column prop="fileName" label="文件名" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="fullName" label="路径" show-overflow-tooltip min-width="300">
          <template slot-scope="scope">
            {{ scope.row.fullName }}
          </template>
        </el-table-column>
        <el-table-column label="上传时间" header-align="center" align="center" width="150" >
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="50">
          <template slot="header">
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新"></el-button>
          </template>
          <template slot-scope="scope">
            <template>
              <el-popover placement="bottom" trigger="click">
                <el-link type="primary" :href="getLink(scope.row)" target="_blank">{{ getLink(scope.row) }}</el-link>
                <el-button type="text" slot="reference" icon="el-icon-link" title="链接"></el-button>
              </el-popover>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!--底部分页-->
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount">
      </el-pagination>
    </el-footer>
  </el-container>

  <div slot="footer">
    <el-button type="primary" @click="accept">确定</el-button>
    <el-button type="info" @click="cancel">取消</el-button>
  </div>
</el-dialog>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
const STORE_MODULE = {
  "name": "filesys",
  "state": [
    "queryObject",
    "dataTable",
    "group"
  ],
  "mutations": [
  ],
  "actions": [
    "query"
  ]
};
export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    fileTypes: {
      type: Array,
      default: null
    },
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    show: {
      get(){
        return this.visible;
      },
      set(val){
        this.$emit("update:visible", val)
      }
    }
  },
  data() {
    return {
      keyword: null,
      currentRow: null
    };
  },
  created() {

  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    open(){
      this.queryObject.parameters.fileTypes = this.fileTypes;
      this.query();
    },
    searchData() {
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    clearConditions() {
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    rowClick(row){
      this.currentRow = row;
    },
    rowDbClick(row, column, event) {
      this.currentRow = row;
      this.rowSelected(this.currentRow);
    },
    rowSelected(file){
      if (!file){
        alert('请选择一个文件');
        return;
      }
      this.$emit('fileSelected', file);
      this.show = false;
    },
    accept(){
      this.rowSelected(this.currentRow);
    },
    cancel(){
      this.show = false;
    },
    getLink(file){
      return `${this.$service.file.load}/${this.group}?fileId=${file.fileId}`;
    }
  }
};
</script>
